<template>
  <div class="rectification">
    <div class="template-container">
      <CustomTitle title="售后原因配置" />
      <div class="template-button-container">
        <div
          v-for="(item, i) in list"
          :key="item"
          @click="handeleActive(i)"
          :class="activeIndex === i ? 'active button' : 'button'"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="reason-content">
      <a-button type="primary" @click="handleAdd(false)">
        <template #icon>
          <icon-plus />
        </template>
        <template #default>添加售后原因分类</template>
      </a-button>
      <div class="reason_tree--content">
        <div class="reason_tree" v-for="(item, i) in treeDate" :key="item.key">
          <!--  一级      -->
          <div class="reason_tree--item reason_tree--bg">
            <div class="tree-name white-space">{{ item.reasonName }}</div>
            <div class="edit-buttons">
              <icon-plus size="16" @click="handleAdd(item, i)" />
              <GiSvgIcon name="rectification-del" size="16" style="margin: 0 20px" @click="handeleDel(item, i)" />
              <template v-if="item.children?.length > 0">
                <icon-caret-up size="16" v-if="item.isShow" @click="item.isShow = false" />
                <icon-caret-down size="16" v-else @click="item.isShow = true" />
              </template>
            </div>
          </div>
          <!--  二级      -->
          <div style="display: flex" class="reason_tree--children" v-show="item.isShow && item.children?.length > 0">
            <!--            <div class="children-item&#45;&#45;line">-->
            <!--              <div class="reason_tree&#45;&#45;line reason_tree&#45;&#45;position"></div>-->
            <!--            </div>-->
            <div class="w100">
              <div v-for="(items, j) in item?.children" :key="items.key">
                <div :class="j < item.children.length - 1 ? 'children-item--two line' : 'children-item--two '">
                  <div class="w100">
                    <div style="display: flex">
                      <div v-if="j >= item.children.length - 1" class="line-bottom"></div>
                      <div class="children-item w100">
                        <div class="reason_tree--line"></div>
                        <div class="reason_tree--item w100">
                          <div class="white-space">{{ items.reasonName }}</div>
                          <div class="edit-buttons">
                            <icon-plus size="16" @click="handleAdd(items, i, j)" />
                            <GiSvgIcon
                              name="rectification-del"
                              size="16"
                              style="margin: 0 20px"
                              @click="handeleDel(items, i, j)"
                            />
                            <template v-if="items.children?.length > 0">
                              <icon-caret-up size="16" v-if="items.isShow" @click="items.isShow = false" />
                              <icon-caret-down size="16" v-else @click="items.isShow = true" />
                            </template>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!--  三级          -->
                    <div class="children-item--three" v-show="items.isShow && items.children?.length > 0">
                      <div class="children-item--line"></div>
                      <div class="w100">
                        <div class="children-item" v-for="(itemTree, k) in items.children" :key="itemTree.key">
                          <div class="reason_tree--line"></div>
                          <div class="reason_tree--item w100">
                            <div class="white-space">{{ itemTree.reasonName }}</div>
                            <div class="edit-buttons" style="text-align: center">
                              <GiSvgIcon name="rectification-del" size="16" @click="handeleDel(itemTree, i, j, k)" />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--  新增售后原因 start  -->
  <a-modal :visible="visible" width="486px" unmount-on-close :mask-closable="false" :closable="false" title-align="start">
    <template #title>
      <CustomTitle title="新增售后原因" />
    </template>
    <div class="add-type-modal">
      <a-form :model="typeForm" :rules="typeFormRules" auto-label-width ref="typeFormRef">
        <a-form-item label="上级售后原因" v-if="typeForm.parentId">
          <a-input placeholder="上级售后原因" disabled v-model.trim="typeForm.parentName" />
        </a-form-item>
        <a-form-item field="reasonName" label="售后原因">
          <a-input placeholder="请输入售后原因" v-model.trim="typeForm.reasonName" />
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-button style="width: 92px; background-color: #f2f3f5" @click="handleCancel">取消</a-button>
      <a-button style="width: 92px" type="primary" @click="handleAddOk">确定</a-button>
    </template>
  </a-modal>
  <!--  新增售后原因 end  -->
  <!--  删除售后原因 start  -->
  <a-modal
    :visible="isShowDelModal"
    okText="确定"
    cancelText="取消"
    width="500px"
    :mask-closable="false"
    unmountOnClose
    :closable="false"
  >
    <div class="modal-message">
      <div class="modal-message-icon">
        <img :src="DelTypeIcon" />
      </div>
      <div class="modal-message-tip">是否删除该售后原因及其子级?</div>
    </div>
    <template #footer>
      <a-button style="width: 92px; background-color: #f2f3f5" @click="isShowDelModal = false">取消</a-button>
      <a-button style="width: 92px" type="primary" @click="handleDelOk">确定</a-button>
    </template>
  </a-modal>
  <!--  删除售后原因 end  -->
</template>

<script setup lang="ts">
import CustomTitle from "@/components/CustomTitle/index.vue";
import { getCurrentInstance, ref } from "vue";
import { addTemplate, delTemplate, listTemplate } from "@/apis/rectificationReason";
import DelTypeIcon from "@/assets/images/type-del-icon.png";
import { Message } from "@arco-design/web-vue";

const { proxy }: any = getCurrentInstance();
const list = ref(["整改", "增减项"]);
const activeIndex = ref(0);
const typeForm = ref({});
const visible = ref(false);
const isShowDelModal = ref(false);
const nameTitle = ref("整改");
const reasonId = ref("");
const treeDate = ref([]);
const typeFormRules = {
  reasonName: [
    { required: true, message: `请输入售后原因`, trigger: "blur" },
    { maxLength: 30, message: "请输入30个字符以内", trigger: "blur" }
  ]
};
const delIndex = ref({ i: "", j: "", k: "" });
const getList = async () => {
  const { data } = await listTemplate({
    afterSalesType: nameTitle.value === "整改" ? 1 : 3
  });
  console.log(treeDate.value);
  treeDate.value = (data.length > 0 && mergeTrees(treeDate.value, data)) || [];
};
getList();
// 切换 tabs
const handeleActive = i => {
  activeIndex.value = i;
  nameTitle.value = i === 0 ? "整改" : "增减项";
  treeDate.value = [];
  getList();
};
// 点击新增
const handleAdd = (item, i, j) => {
  console.log(item);
  if (item) {
    typeForm.value = {
      parentId: item.reasonId,
      parentName: item.reasonName,
      reasonName: ""
    };
    delIndex.value = { i, j };
  } else {
    typeForm.value = { reasonName: "" };
    delIndex.value = false;
    console.log(delIndex.value);
  }
  visible.value = true;
};
// 新增编辑确定
const handleCancel = () => {
  visible.value = false;
};
// 新增编辑确定
const handleAddOk = async () => {
  const valid = await proxy.$refs.typeFormRef?.validate();
  if (valid) return;
  const { data } = await addTemplate({
    ...typeForm.value,
    afterSalesType: nameTitle.value === "整改" ? 1 : 3
  });
  // 添加一级售后分类
  if (!delIndex.value) {
    treeDate.value.unshift({ ...data, isShow: true });
  }
  // 添加二级
  if (delIndex.value.i >= 0 && delIndex.value.j == undefined) {
    if (treeDate.value[delIndex.value.i].children) {
      treeDate.value[delIndex.value.i].isShow = true;
      treeDate.value[delIndex.value.i].children.unshift({ ...data, isShow: true });
    } else {
      treeDate.value[delIndex.value.i].children = [];
      treeDate.value[delIndex.value.i].isShow = true;
      treeDate.value[delIndex.value.i].children.unshift({ ...data, isShow: true });
    }
  }
  // 添加三级级
  if (delIndex.value.i >= 0 && delIndex.value.j >= 0) {
    if (treeDate.value[delIndex.value.i].children[delIndex.value.j].children) {
      treeDate.value[delIndex.value.i].children[delIndex.value.j].isShow = true;
      treeDate.value[delIndex.value.i].children[delIndex.value.j].children.unshift({ ...data, isShow: true });
    } else {
      treeDate.value[delIndex.value.i].children[delIndex.value.j].children = [];
      treeDate.value[delIndex.value.i].children[delIndex.value.j].isShow = true;
      treeDate.value[delIndex.value.i].children[delIndex.value.j].children.unshift({ ...data });
    }
  }
  Message.success("新增成功");
  visible.value = false;
};
// 点击删除
const handeleDel = (item, i, j, k) => {
  isShowDelModal.value = true;
  reasonId.value = item.reasonId;
  delIndex.value = {
    i,
    j,
    k
  };
};
// 删除
const handleDelOk = async () => {
  await delTemplate({ reasonId: reasonId.value });
  if (delIndex.value.i >= 0 && delIndex.value.j == undefined && delIndex.value.k == undefined) {
    treeDate.value.splice(delIndex.value.i, 1);
  }
  if (delIndex.value.i >= 0 && delIndex.value.j >= 0 && delIndex.value.k == undefined) {
    treeDate.value[delIndex.value.i].children.splice(delIndex.value.j, 1);
  }
  if (delIndex.value.i >= 0 && delIndex.value.j >= 0 && delIndex.value.k >= 0) {
    treeDate.value[delIndex.value.i].children[delIndex.value.j].children.splice(delIndex.value.k, 1);
  }
  Message.success("删除成功");
  isShowDelModal.value = false;
  delIndex.value = {
    i: "",
    j: "",
    k: ""
  };
};
// 合并树结构
const mergeTrees = (tree1, tree2) => {
  for (let key in tree2) {
    console.log(key);
    if (tree2[key] instanceof Object) {
      if (tree1[key]) {
        mergeTrees(tree1[key], tree2[key]);
      } else {
        tree1[key] = tree2[key];
      }
    } else {
      tree1[key] = tree2[key];
    }
  }
  return tree1;
};
</script>

<style scoped lang="scss">
@import "index";
</style>
